<template>
  <div class="main">
         <!-- 推荐小说区域 -->
        <div class="recommended" v-show="Recommend.length!==0">
          <!-- 推荐小说区域 -->
          <div class="item" v-for="(item,index) in Recommend" :key="index">
            <!-- 左边的图片 -->
            <div class="image" @click="imgClickFn(item.name)">
              <router-link :to="{path:`/chapter/${item.href}`}">
                <img :src="item.img" alt="" class="left">
              </router-link>
            </div>

            <!-- 右边的简介 -->
            <dl>
              <dt>
                <span>{{item.zuozhe}}</span>
                <a style="color:#6F78A7">{{item.name}}</a>
              </dt>
              <dd>{{item.jianjie}}</dd>
            </dl>
          </div>

        </div>

       <div>
         <div class="search_result">
           <div class="result">
            <span>{{searchResult.length===0?'什么都没搜到':'搜索结果'}}</span>
        </div>
            <!-- <ul v-if="searchResult.length!==0">
              <li v-for="(item,index) in searchResult" :key="index">
                <span class="s1">{{item.type}}</span>
                <span class="s2" @click="jump(item)">
                  <a>{{item.bookname}}</a>
                </span>
                <span class="s3" @click="jump2(item)">
                  <a>{{item.newChapter}}</a>
                </span>
                <span class="s4">
                  {{item.author}}
                </span>
              </li>

            </ul> -->
      <List :searchResult="searchResult"></List>
        </div>
        <div class="right">
           <div class="result">
            <span>{{searchResult.length===0?'':'猜你喜欢'}}</span>
        </div>
              <NewList :searchResult="GuessyouLike"></NewList>
        </div>
       </div>
  </div>
</template>
<script>
import List from '@/components/List/index.vue'
import NewList from '@/components/newList/newList.vue'
export default {
  name: 'SearchResult',
  data () {
    return {
      searchResult: [],
      GuessyouLike: [],
      Recommend: []

    }
  },
  components: {
    List,
    NewList
  },
  async created () {
    // 请求搜索结果
    const res = await this.$API.reqSearch({ key: this.$route.params.keyword })

    this.searchResult = res.data.searchResult
    this.GuessyouLike = res.data.GuessyouLike
    this.Recommend = res.data.Recommend
  },
  methods: {
    jump (item) {
      // 点击书名，触发SETNAME函数，将书名传递过去，
      this.$store.commit('SETNAME', item.bookname)
      // 跳转章节内页面
      this.$router.push(`/chapter/${item.href}`)
    },
    jump2 (item) {
      // 点击章节，先触发Setchapter函数，重新获取当前小说的所有章节
      this.$store.dispatch('Setchapter', item)
      // 跳转到内容页面
    }
  },
  // 监听当前页面的路由
  watch: {
    async '$route' () {
      const res = await this.$API.reqSearch({ key: this.$route.params.keyword })

      this.searchResult = res.data
    }
  }
}
</script>
<style lang="less" scoped>
// .nothing{
//       font-size: 24px;
//     font-weight: 500;
//     padding: 20px;
// }
img {
  width: 100px;
  height: 150px;
}
a{
  color: #333;
  text-decoration: none;
  // 悬浮鼠标手指模样
  cursor: pointer;
}
.main{
  // padding: 0 50px;
  .result{
    margin-left: 50px;
    line-height: 50px;
    span{
      font-size: 22px;
    }
  }
}
.search_result{
  float: left;
}
.right{
  margin-right: 73px;
  float: right;
}
.recommended {
  height: 350px;
  background: #fef9ef;
  border: 3px solid #c3dfea;
  // width: 800px;
  // float: left;
  padding: 10px 10px 0 10px;
  margin: 0 73px 0 50px;
  .item:nth-child(4n) {
    margin-left: 0px;
  }
  .item:first-child {
    margin-left: 0px;
  }
  .item {
    padding-bottom: 15px;
    width: 335px;
    float: left;
    margin-left: 30px;
    .image {
      float: left;
      width: 120px;
    }
    dl {
      float: right;
      padding-right: 15px;
      width: 200px;

      dt {
        border-bottom: 1px dashed gray;
        padding-bottom: 5px;
      }
      span {
        float: right;
      }
      dd {
        padding-top: 5px;
        // 溢出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;

        -webkit-line-clamp: 5; // 超出多少行

        -webkit-box-orient: vertical;
        line-height: 150%;
      }
    }
    //  span{
    //   padding-right: 10px;
    //     float: right;
    //   }
  }
}
</style>
